<!-- 上传单个文件 -->
<template>
  <div>
    <!-- 隐藏 file input -->
    <!-- multiple允许一次上传多个文件 -->
    <input
      type="file"
      ref="fileInput"
      @change="onFileChange"
      style="display: none"
      multiple
    />

    <!-- 超链接触发上传操作 -->
    <a class="dropdown-item" href="#" @click.prevent="triggerFileUpload">
      <i class="bi bi-file-earmark m-1"></i>上传文件
    </a>

    <!-- 进度条组件 -->
    <ProgressBarCompoent
      :isUploading="isUploading"
      :currentFileName="currentFileName"
      :uploadProgress="uploadProgress"
      :selectedFiles="selectedFiles"
    />
  </div>
</template>

<script>
import axios from "axios";
import ProgressBarCompoent from "@/components/NetworkdiskView/FileOperateCompoent/ProgressBarCompoent.vue";
import { mapState } from "vuex"; // 引入mapState辅助函数
export default {
  name: "FileUploadComponent",
  components: {
    ProgressBarCompoent,
  },
  data() {
    return {
      selectedFile: null,
      isUploading: false, // 控制进度条的显示
      currentFileName: "", // 当前上传的文件名
      uploadProgress: 0, // 上传进度
      selectedFiles: [], // 选择的文件列表
      targetFolder: "/",
    };
  },
  computed: {
    // 使用mapState辅助函数映射Vuex state到组件的computed属性
    ...mapState(["parentFolderId"]),
  },
  created() {
    // 在组件创建时从Vuex store中获取parentFolderId并赋值给targetFolder
    // 注意这里我们直接在data对象上设置targetFolder，而不是在data中声明它
    this.targetFolder = this.parentFolderId || "/"; // 如果没有parentFolderId，设置默认值为"/"
  },
  methods: {
    triggerFileUpload() {
      // 触发隐藏的 file input 的点击事件
      this.$refs.fileInput.click();
    },
    onFileChange(e) {
      const files = e.target.files;
      if (files && files.length > 0) {
        // 更新单个文件的状态
        this.selectedFile = files[0];
        this.currentFileName = this.selectedFile.name;

        // 更新文件列表的状态
        this.selectedFiles = Array.from(files); // 将FileList对象转换为数组

        this.uploadFile();
      }
    },
    async uploadFile() {
      if (!this.selectedFile) {
        alert("请先选择一个文件。");
        return;
      }
      this.isUploading = true; // 显示进度条
      const formData = new FormData();
      formData.append("file", this.selectedFile);
      formData.append("targetFolder", this.targetFolder); // 添加文件上传的目标文件夹信息（为空则表示上传在根目录）
      try {
        const response = await axios.post("/api/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            this.uploadProgress = Math.round(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          },
        });

        console.info(response.data);
        alert("文件上传成功。");
        // 清除已选择的文件，以便用户可以选择新文件上传
        this.$refs.fileInput.type = "text"; // 临时更改类型为 text
        this.$refs.fileInput.type = "file"; // 更改回 file 以重置 input
        // 刷新
        setTimeout(function () {
          //1秒后执行刷新
          window.location.reload();
        }, 1000); //单位是毫秒
      } catch (error) {
        // 错误处理逻辑...
        alert("文件上传失败");
      } finally {
        this.isUploading = false; // 隐藏进度条
        this.uploadProgress = 0; // 重置进度
        this.selectedFile = null; // 重置文件
        this.currentFileName = ""; // 重置文件名
      }
    },
  },
};
</script>
